<template>
    <div class="proposal">
        <div class="textarea">
            <textarea class="writeWord" contenteditable="true" maxlength="200" v-model="desc" @input="descInput"></textarea>
            <span class="textNum">{{remnant}}/200</span>
        </div>
        <div class="picture">
            <p>图片（选填）</p>
            <div class="box-images">
                <span class="add">+</span>
                <input type="file" name="image" accept="image/*" class="input" @change='uploadImg($event)'>
            </div>  
        </div>
        <div class="btn">
            <span>提交</span>
        </div>
    </div>
    
</template>
<script>
export default {
    data() {
        return {
            desc:'',
            remnant: 0
        }
    },
    mounted() {
        var _this = this
    },
    methods: {
        descInput(){
            var _this = this
            var txtVal = _this.desc.length;
            _this.remnant = txtVal;
        },
        uploadImg (event) {
            console.log(event.target.files[0])
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/layout'
@import '../../../assets/css/var'
    .proposal{
        background-color $White
        padding .4rem
        box-sizing border-box
        .textarea{
            position relative
            margin-bottom .4rem
            .writeWord{
                width 100%
                min-height 3.5rem
                background-color $dWhite
                border-radius .1rem
                padding .2rem
                box-sizing border-box
                color $lBlack
                line-height .35rem
                font-size $text-font24
                letter-spacing: 1px
            }
            .textNum{
                position absolute
                bottom .2rem
                right .2rem
                color $elBlack
            }
        }
        .picture{
            width 100%
            min-height 2rem
            background-color $dWhite
            padding .2rem
            box-sizing border-box
            .box-images{
                width 100%
                padding-top .2rem
                .add{
                    width 1rem
                    height 1rem
                    line-height .9rem
                    display inline-block
                    border 1px dashed #999
                    font-size 45px
                    text-align center
                    color #999
                    position absolute
                    z-index 1
                }
                .input{
                    width 1rem
                    height 1rem
                    position absolute
                    z-index 2
                    opacity 0
                }
            }
            p{
                color $lBlack
                font-size $text-font24
            }
        }
        .btn {
            position absolute
            bottom .4rem
            left 50%
            margin-left -2.2rem
            span {
                display: inline-block
                width: 4.5rem
                height: .6rem
                background: $green
                color: $White
                border-radius: 5px
                text-align: center
                line-height: .55rem
                &:hover {
                    background: $green-7
                }
            }
        }
    }
    
</style>
